<template>

    <div>
        <div class="p-user-center" style="min-height:100%;">
            <div class="back-ground">
            </div>
            <div class="page-body">
                <div class="user-profile">
                    <div class="avatar">
                        <div class="c-face-img-con c-face-img" style="width: 160px; height: 160px;">
                            <img class="personalImg" :src="userDate.userImg" alt="" title=""
                                 style="border-radius: 50%;">
                        </div>
                    </div>
                    <div class="user-info">
                        <div class="name-row">
                            <span class="name">{{userDate.username}}</span>
                            <a target="_self" href="/personalPage" class="user-home-link">
                                个人页面&gt;&gt;
                            </a>
                        </div>
                        <div class="describe">
                            {{userDate.introduction}}
                        </div>
                        <a title="修改个人资料" href="personalSetting" class="icon-edit">
                            <i class="el-icon-edit"></i>
                        </a>
                    </div>
                </div>
                <div id="content-area" class="content-area">
                    <div class="left-nav">
                        <a href="/myLikes" :class="{active:shows==1}" class="nav-item">
                            <i class="fonts icon-favorites-fill"></i>
                            我喜欢的
                        </a>
                        <a href="/personalWorks" :class="{active:shows==2}" class="nav-item">
                            <i class="fonts el-icon-s-management"></i>
                            作品管理
                        </a>
                        <a href="/myDemands" :class="{active:shows==7}" class="nav-item">
                            <i class="fonts el-icon-s-promotion"></i>
                            我的需求
                        </a>
                        <a href="/myOrders" :class="{active:shows==3}" class="nav-item">
                            <i class="fonts el-icon-s-order"></i>
                            我的订单
                        </a>
                        <!--                        <a href="" :class="{active:shows==4}" class="nav-item">-->
                        <!--                            <i class="fonts el-icon-message-solid"></i>-->
                        <!--                            最新消息-->
                        <!--                        </a>-->
                        <a href="/personalSetting" :class="{active:shows==5}" class="nav-item">
                            <i class="fonts el-icon-s-tools"></i>个人设置
                        </a>
                        <a href="/changePassword" :class="{active:shows==6}" class="nav-item">
                            <i class="fonts el-icon-key"></i>
                            修改密码
                        </a>
                    </div>
                    <div class="content-header">
                        <div class="header-toolbar">
                            <span>个人设置</span>
                        </div>

                    </div>
                </div>

                <div>
                    <div id="main" class="main-warp">
                        <div class="main-content">
                            <div class="formDiv">
                                <form :model="user" role="form" class="form-horizontal ">
                                    <div class="form-item">
                                        <div class="input-warp s">
                                            <el-upload
                                                    action=""
                                                    class="avatar-uploader"
                                                    list-type="picture"
                                                    :on-change="beforeAvatarUpload">
                                                <img class="newImg" style="margin-top: 10px;border-radius: 50%;"
                                                     :src="user.userImg">
                                            </el-upload>
                                        </div>
                                    </div>

                                    <div class="form-item">
                                        <div class="input-warp">
                                            <el-input placeholder="用户昵称" prefix-icon="el-icon-user" type="text" class="inputs"
                                                      v-model="user.username">
                                            </el-input>


                                        </div>
                                    </div>
                                    <p></p>
                                    <div class="form-item">
                                        <div class="input-warp s">
                                            <el-input prefix-icon="el-icon-phone" v-model="user.phoneNum"
                                                      name="userName" placeholder="手机号码" type="text" class="inputs"
                                                      value="">
                                            </el-input>
                                        </div>
                                    </div>
                                    <p></p>
                                    <div class="form-item">
                                        <div class="input-warp s">
                                            <el-input prefix-icon="el-icon-message" v-model="user.email"
                                                      placeholder="邮箱" type="text" class="inputs" value=""/>
                                        </div>
                                    </div>
                                    <p></p>
                                    <div class="form-item">
                                        <div class="input-warp">
                                            <el-radio-group v-model="gender">
                                                <el-radio style="background-color: #f4f4f4" value='1' label='1'>男</el-radio>
                                                <el-radio style="background-color: #f4f4f4" label='0' value='0'>女</el-radio>
                                            </el-radio-group>
                                        </div>
                                    </div>
                                    <p></p>
                                    <div class="form-item">
                                        <div class="input-warp">
                                            <el-input v-model="user.introduction" :rows="5" placeholder="个人简介"
                                                      type="textarea" class="inputs" value=""/>
                                        </div>
                                    </div>
                                    <div class="btn-warp">
                                        <div class="text-center" style="margin-top: 20px;">
                                            <el-button type="button" style="background-color: #adb3fb;color: #fff" @click="change">确认修改</el-button>
                                        </div>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>

    </div>
</template>

<script>
    import HeaderNav from "../../components/HeaderNav";
    import {changeInfo, selectUser, updateAvatar} from "../../assets/api/userApi";

    export default {
        data() {
            return {
                active: "",
                shows: 5,
                user: {
                    email: '',
                    username: '',
                    phoneNum: '',
                    gender: "女",
                    introduction: ''
            },
                userDate:{},
                gender:'0',
            }
        },
        methods: {
            getUserInformation() {
                let data = {};
                data.userId = localStorage.userId;
                selectUser(data).then((res) => {
                    this.user = res.data;
                    this.userDate = res.data;
                    this.gender = res.data.gender+'';
                })
            },
            beforeAvatarUpload(file) {
                let data = new FormData();
                data.append('userId', localStorage.userId);
                data.append('file', file.raw);
                updateAvatar(data).then(res => {
                    this.$message.success(res.message)
                })
            },
            change() {
                let data = {};
                data = this.user;
                data.userId = localStorage.userId;
                data.oldUsername = localStorage.username;
                data.gender = parseInt(this.gender);
                changeInfo(data).then((res) => {
                    if (res.code === 200) {
                        this.$message.success(res.message);
                        this.getUserInformation();
                    }
                    else {
                        this.$message.error(res.message)
                    }

                })
            }
        },
        created() {
            this.getUserInformation();
        },
        components: {
            HeaderNav
        }
    }
</script>

<style scoped>

    #main {
        position: relative;
        left: 5%;

    }

    .p-user-center {
        position: relative;
        padding-top: 70px;
        padding-bottom: 120px;
        background: #f4f4f4;
    }

    .back-ground {
        background-image: url("../../assets/img/personalPageBg.png");
        background-repeat: repeat;
        background-size: 100% 100%;
        position: absolute;
        height: 300px;
        top: 0;
        left: 0;
        right: 0;
        z-index: 0;
    }

    .page-body {
        width: 1200px;
        margin: 0 auto;
        z-index: 1;
        position: relative;
    }

    .user-profile {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        min-height: 160px;
    }

    .personalImg {
        height: 160px;
        width: 160px;
    }

    .avatar {
        height: 160px;
        width: 160px;
    }

    .c-face-img-con {
        display: inline-block;
        position: relative;
    }

    .user-info {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        margin-left: 40px;
    }

    .name-row {
        height: 40px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .name {
        font-size: 30px;
        color: #fff;
    }

    .user-home-link {
        margin-left: 20px;
        font-size: 18px;
        font-weight: 600;
    }

    .describe {
        height: 28px;
        font-size: 16px;
        color: #aaa;
        line-height: 21px;
        margin-top: 16px;
        word-break: break-all;
    }

    .icon-edit {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 50%;
        color: #000;
        background: #fff;
        width: 50px;
        height: 50px;
        margin-top: 26px;
        font-size: 20px;
        text-decoration: none;
    }

    .user-home-link {
        margin-left: 20px;
        font-size: 18px;
        font-weight: 600;
        color: #adb3fb;
        text-decoration: none;
    }

    .left-nav {
        margin-top: 100px;
        width: 223px;
        background: #fff;
        border-radius: 4px;
        padding: 20px;
        float: left;
        height: 700px;
    }

    .nav-item:not(:first-of-type) {
        margin-top: 20px;
    }

    .nav-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #2f2f2f;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        position: relative;
        text-decoration: none;
    }

    .fonts {
        font-size: 24px;
        margin-right: 10px;
    }

    .active {
        color: #adb3fb;
    }

    .content-header {
        width: 80%;
        height: 57px;
        background: #fff;
        border-radius: 4px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0 20px 0 16px;
        font-size: 18px;
        font-weight: 600;
        color: #2f2f2f;
        float: right;
        margin-top: 100px;
    }

    .header-toolbar {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
    }


    .newImg {
        height: 100px;
        width: 100px;
    }

    .avatar-uploader {
        cursor: pointer;
        position: relative;
    }

    p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }

    .position {
        text-decoration: none;
        color: #222222;
    }

    .position:hover {
        color: #adb3fb;
    }

    /deep/ .el-upload__input {
        visibility: hidden !important;
    }
</style>
